<template>
  <el-dialog
    title="自学记录"
    :visible.sync="dialogVisible"
    width="40%"
    @close="closeDialog">
    <el-table
      :data="dataList"
      style="width: 100%">
      <el-table-column
        prop="lessonName"
        label="课程名称"
        >
      </el-table-column>
      <el-table-column
        prop="lessonType"
        label="课程类型"
        width="180"
        :formatter="(row, column, cellValue, index) => {return cellValue == 1?'文档':'未定义'}">
      </el-table-column>
      <el-table-column
        prop="learnDuration"
        label="学习时长（秒）"
        width="180">
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page-number.sync="listQuery.pageNumber"
      :page-size.sync="listQuery.pageSize"
      @pagination="getDataList"
    />
  </el-dialog>
</template>

<script>

import { page } from "@/api/ts/learnRecord"
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  name: "index",
  props: [
    'showLearnRecord',
    'documentId'
  ],
  data(){
    return{
      dataList: [{}],
      total: 0,
      listQuery: {
        pageIndex: 0,
        pageNumber: 1,
        pageSize: 10,
        lessonId: ''
      },
      dialogVisible: false
    }
  },
  watch:{
    documentId(val){
      this.listQuery.lessonId = val
      this.getDataList()
    },
    showLearnRecord(val){
      console.log(val, val)
      this.dialogVisible = val
    }
  },
  methods: {
    closeDialog(){
      this.dialogVisible = false
      this.$emit("update:showLearnRecord",this.dialogVisible)
    },
    getDataList(){
      if (this.listQuery.lessonId) {
        page(this.listQuery).then(res => {
          this.dataList = res.data.rows
          this.total = res.data.total
        })
      }

    }
  }
}
</script>

<style scoped>

</style>
